<template>
  <div class='project-dialog'>
    <el-dialog class="large_dialog" :title="dialogName" :visible.sync="dialogVisible" top="10px" :key="dialogKey">
      <div>
        <div class="project-head">
          <ul class="head-nav-list">
            <li class="nva-list-item" v-for="item of navList" :key="item.message">
              <el-button :class="{ 'btn_group': defBgc, 'btn_group_active': item.path === currentComponent }" @click="setCurrentComponent(item.path)">
                {{ item.title }}
              </el-button>
            </li>
          </ul>
        </div>
      </div>
      <transition name="tab" mode="out-in">
        <keep-alive>
          <component ref="comps" @cancel="cancel" :is="currentComponent" style="overflow: auto;" :projectPointInfo="projectPointInfo"></component>
        </keep-alive>
      </transition>
    </el-dialog>
  </div>
</template>

<script>
import { getProjectPointControl } from '@/api'
import BasicInformation from './basicInformation'
import PlaneImg from './planeImg/index.vue'
import RiskPoint from './riskPoint/index.vue'
import emergency from './emergency/index.vue'
import emergencyCard from './emergencyCard/index.vue'
import emergencyRanks from './emergencyRanks/index.vue'
export default {
  components: {
    BasicInformation,
    PlaneImg,
    RiskPoint,
    emergency,
    emergencyCard,
    emergencyRanks,
  },
  data () {
    return {
      defBgc: true,
      // 切换组件
      currentComponent: "BasicInformation",
      dialogName: '',
      dialogKey: 0,
      // 是否打开弹窗
      dialogVisible: false,
      navList: [
        {
          title: "基本信息",
          path: "BasicInformation",
        },
        {
          title: "平面图",
          path: "PlaneImg",
        },
        {
          title: "风险点",
          path: "RiskPoint",
        },
        {
          title: "应急预案",
          path: "emergency",
        },
        {
          title: "应急卡",
          path: "emergencyCard",
        },
        {
          title: "应急队伍",
          path: "emergencyRanks",
        },
      ],
      // 项目点信息
      projectPointInfo: {
        projectPointId: undefined,
        projectPointName: undefined,
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 弹框显示方法
    async show (point, name) {
      this.dialogKey += 1
      this.dialogState = 1
      this.dialogVisible = true
      this.currentComponent = "BasicInformation",
        this.dialogName = "编辑项目点信息"
      this.projectPointInfo = {
        projectPointId: point,
        projectPointName: name,
      }
      const response = await getProjectPointControl(this.projectPointInfo.projectPointId)
      const region = {
        provinceId: response.data.provinceId,
        cityId: response.data.cityId,
        areaId: response.data.areaId
      }
      this.$nextTick(async () => {
        if (this.dialogVisible) {
          await this.$refs.comps.show(response.data, region)
        }
      })
      this.dialogVisible = true;
    },
    // 弹窗新增编辑-取消
    cancel () {
      this.dialogVisible = false;
    },
    // 动态切换组件
    setCurrentComponent (componentName = 'BasicInformation') {
      if (this.dialogState === 0 && this.dialogVisible) {
        this.$message.warning('请先保存数据')
        return
      }
      this.currentComponent = componentName;
      console.log(componentName)
    },
  },
  created () {

  },
  mounted () {

  },
}
</script>

<style lang='less' scoped>
.project-head {
  padding-bottom: 29px;
}

.nva-list-item {
  color: #fff;
  float: left;
}

.head-nav-list::after {
  display: block;
  clear: both;
  content: " ";
}
</style>